<template>
  <d2-container>
    <div class="accountrecharge">
      <div class="container clearfix">
        <div class="left fl">
          <el-tabs @tab-click="handleClick" v-model="activeName" type="border-card">
<!--            <el-tab-pane label="银行卡转账" name="yhk">-->
<!--              <div class="fontblock">如果充值提交不成功 第一时间联系客服！-->
<!--              </div>-->
<!--              <el-form :inline="true">-->
<!--                请充值到下方银行卡内-->
<!--                <el-form-item>-->
<!--                  <br/>-->
<!--                  卡号：621226 1304003627663  程鹏飞-->
<!--                  <br/>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--              <el-form :inline="true">-->
<!--                <el-form-item label="充值金额：">-->
<!--                  <el-input type="text" size="mini" placeholder="" v-model="tbmoney"-->
<!--                            style="width: 80px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="银行卡号：">-->
<!--                  <el-input type="text" size="mini" placeholder="" v-model="tborder"-->
<!--                            style="width: 180px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="充值姓名：">-->
<!--                  <el-input type="text" size="mini" placeholder="" v-model="tbname"-->
<!--                            style="width: 80px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="充值截图：" prop="imgs">-->
<!--                  <el-upload ref="upload2" class="upload-demo" drag action="/api/va/cooperationrecharge/bankcardimg"-->
<!--                             :on-success="upSuccess" :headers="token"-->
<!--                             :on-remove="upRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList">-->
<!--                    <i class="el-icon-upload"></i>-->
<!--                    <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>-->
<!--                  </el-upload>-->
<!--                </el-form-item>-->
<!--                <br/>-->
<!--                <p style="padding: 0 80px;">-->
<!--                  充值请延迟一分钟提交，如果充值提交不成功 第一时间联系客服！</p>-->
<!--                <el-form-item>-->
<!--                  <el-button :loading="btnloading" type="primary" size="mini" @click="pay" style="margin-left: 85px">提交</el-button>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--              <h3 style="border-top:1px solid #ccc;margin:0;padding:20px 0;">审核列表</h3>-->
<!--              <el-table :data="tableData" border style="width: 100%" header-align="center">-->
<!--                <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>-->
<!--                <el-table-column prop="bankcard_time" label="日期" align="center"></el-table-column>-->
<!--                <el-table-column prop="bankcard_money" label="充值金额" align="center"></el-table-column>-->
<!--                <el-table-column prop="bankcard_number" label="帐号" align="center"></el-table-column>-->
<!--                <el-table-column label="截图" align="center">-->
<!--                  <template slot-scope="scope">-->
<!--                    <a :href="scope.row.bankcard_img" target="_Blank">-->
<!--                      <img :src="scope.row.bankcard_img" style="max-width: 240px;max-height: 100px">-->
<!--                    </a>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="审核状态" align="center">-->
<!--                  <template slot-scope="scope">-->
<!--                    <span v-if="scope.row.bankcard_status == 1">待审核</span>-->
<!--                    <span v-else>通过</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="操作" align="center">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button type="danger" @click="onDelete(scope.row)" size="mini">删除</el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--              <el-pagination @current-change="handleCurrentChange" :current-page.sync="page" style="text-align:right;margin-top:10px;"-->
<!--                             :page-size="20" layout="total, prev, pager, next" :total="total">-->
<!--              </el-pagination>-->
<!--            </el-tab-pane>-->
            <el-tab-pane label="支付宝自动充值入口" name="zfb">
              <div>
                <div class="code">
                  <img src="../../assets/4.jpg" style="display: block; width: 250px; margin: 0 auto;">
                </div>
                <div style="text-align:center;margin-top: 15px">转账完成后提交订单号</div>
                <p style="text-align:center;">提示:充值请延迟一分钟提交，如果充值提交不成功 第一时间联系客服！</p>
                <el-form label-width="100px" ref="form" size="mini" style="padding-top: 15px;text-align:center;" :inline="true">
                  <el-form-item label="支付宝订单号">
                    <el-input placeholder="请输入支付宝订单号" style="width: 205px;" v-model="order"></el-input>
                  </el-form-item>
                  <el-form-item label="充值金额">
                    <el-input placeholder="请输入充值金额" style="width: 205px;" v-model="moneys">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-button type="primary" @click="supPay" :loading="submitloading">提交</el-button>
                  </el-form-item>
                </el-form>
                <div style="height: 1px; background: #ccc;"></div>
                <h3>支付宝充值记录</h3>
                <el-table :data="zfbtableData" style="width: 100%" border header-align="center">
                  <el-table-column prop="order_number" label="商户订单号" align="center"></el-table-column>
                  <el-table-column prop="information" label="账户信息" align="center"></el-table-column>
                  <el-table-column prop="after_money" label="充值前余额" align="center"></el-table-column>
                  <el-table-column prop="change" label="充值金额" align="center"></el-table-column>
                  <el-table-column prop="transaction" label="支付宝交易号" align="center"></el-table-column>
                  <el-table-column prop="booked_time" label="充值时间" align="center"></el-table-column>
                </el-table>
                <el-pagination @current-change="handleZfbChange" :current-page.sync="zfbpage" style="text-align:right;margin-top:10px;"
                               :page-size="20" layout="total, prev, pager, next" :total="zfbtotal">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import { bankcardsubmit,bankcardlist,bankcarddel,paymentrecord,aliloglist,userinfo } from '../../api/api'
  import Clipboard from "clipboard";
  export default {
    data() {
      return {
        zfbtableData: [],
        moneys: "",
        tableData: [],
        tbmoney: "",
        tborder: "",
        tbname: "",
        order: "",
        activeName: "zfb",
        imgs:'',
        token:{
          'Token':JSON.parse(sessionStorage.getItem('token'))
        },
        fileList:[],
        btnloading:false,
        page:1,
        total:0,
        submitloading:false,
        zfbpage:1,
        zfbtotal:0
      };
    },
    created(){
      this.getZfbList()
      this.getUser()
    },
    methods: {
      //获取支付宝列表
      getZfbList(){
        let params = {
          page:this.zfbpage
        }
        aliloglist(params).then(res=>{
          if(res.Status == 200){
            this.zfbtotal = res.Count
            let temp = res.Data
            temp.forEach(item => {
              item.booked_time = this.insertStr(item.booked_time,10,' ')
              this.zfbtableData.push(item)
            })
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      insertStr(soure, start, newStr){
        return soure.slice(0, start) + newStr + soure.slice(start);
      },
      //支付宝分页
      handleZfbChange(val){
        this.zfbpage = val
        this.getZfbList()
      },
      //获取银行卡列表
      getList() {
        let params = {
          page:this.page,
        }
        this.tableData = []
        bankcardlist(params).then(res=>{
          console.log('银行卡列表',res)
          if(res.Status == 200){
            this.total = res.Count
            let temp = res.Data
            let ipos
            temp.forEach(item => {
              ipos = item.bankcard_time.indexOf("+")
              item.bankcard_time = item.bankcard_time.replace(/T/g," ").substring(0,ipos)
              this.tableData.push(item)
            })
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      //银行卡分页
      handleCurrentChange(val) {
        this.page = val
        this.getList()
      },
      //删除
      onDelete(row){
        let params = {
          id:row.id
        }
        bankcarddel(params).then(res=>{
          console.log('删除',res)
          if(res.Status == 200){
            this.$message.success(res.Message)
            this.getList()
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      //上传成功
      upSuccess(a) {
        this.imgs = a.UrlImg
        this.$message.success(a.Message)
      },
      //移除
      upRemove(file, fileList){
        this.imgs = ''
      },
      //限制上传个数
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件！`);
      },
      pay() {
        let _this = this
        if(_this.tbname == ''){
          _this.$message.warning('充值姓名不能为空！')
        }else if(_this.tborder == ''){
          _this.$message.warning('充值金额不能为空！')
        }else if(_this.tbmoney == ''){
          _this.$message.warning('银行卡号不能为空！')
        }else if(_this.imgs == ''){
          _this.$message.warning('请上传充值截图！')
        }else{
          _this.btnloading = true
          let params = {
            bankcard_img:_this.imgs,
            bankcard_money:Number(_this.tbmoney),
            bankcard_name:_this.tbname,
            bankcard_number:_this.tborder,
          }
          bankcardsubmit(params).then(res=>{
            _this.btnloading = false
            if(res.Status == 200){
              _this.imgs = ''
              _this.tbmoney = ''
              _this.tbname = ''
              _this.tborder = ''
              _this.fileList = []
              _this.$message.success(res.Message)
              this.getList()
            }else{
              _this.$message.error(res.Message)
            }
          })
        }
      },
      //支付宝提交
      supPay() {
        let _this = this
        if(_this.order == ''){
          _this.$message.error('支付宝订单号不能为空！')
        }else if(_this.moneys == ''){
          _this.$message.error('充值金额不能为空！')
        }else{
          _this.submitloading = true
          let params = {
            order_num:_this.order,
            money:Number(_this.moneys)
          }
          paymentrecord(params).then(res=>{
            _this.submitloading = false
            if(res.Status == 200){
              _this.$message.success(res.Message)
              _this.order = ''
              _this.moneys = ''
              this.getUser()
              this.getZfbList()
            }else{
              _this.$message.error(res.Message)
            }
          })
        }
      },
      //获取用户信息
      getUser(){
        userinfo().then(res=>{
          console.log('个人信息',res)
          if(res.Status == 200){
            window.sessionStorage.setItem('userinfo',JSON.stringify(res.Data))
            this.$store.commit('Money',JSON.stringify(res.Data.Money))
            this.$emit('getMoney',res.Data.money)
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      handleClick(tab, event) {
        if(this.activeName == 'yhk'){
          this.getList()
        }
      },
    },
  };
</script>

<style lang="scss">
  .accountrecharge {
    width: 100%;
    overflow-y: scroll;
    margin: 0 auto;
    .left {
      // width: 80%;
      /*background: #444;*/
      /*border:1px solid red;*/
      padding-right: 20px;
    }
    .right {
      width: 20%;
      height: 440px;
      background-color: #f0f0f4;
      padding: 20px;
    }

    supPay
    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .clearfix:after {
      display: block;
      visibility: hidden;
      clear: both;
      height: 0;
      content: "";
    }

    .clearfix {
      zoom: 1;
    }

    .qqimg img {
      cursor: pointer;
    }

    .button {
      position: relative;
      left: 55px;
    }

    .fontblock {
      background: #fffbf0;
      padding: 20px;
      margin-bottom: 10px;
    }

    .bottom h3 {
      padding: 10px;
      background: #fffbf0;
      margin: 20px 0 0 0;
      color: #a78e44;
    }

    .bottom ol {
      background: #f0f0f4;
      margin: 0;
    }

    .bottom ol li {
      padding: 5px 0;
    }

    .el-input.is-disabled .el-input__inner {
      color: #888080;
    }
  }
</style>
